<template>
  <div>
    <el-row>
      <el-col :span="16">
    <el-form ref="form" :model="form" :inline="true" style="text-align: left;height: 38px">
      <el-form-item>
        <el-input v-model="form.filter.kwd" style="float: left;" placeholder="请输入角色名称"
                  icon="search"></el-input>
        <el-button type="primary" style="float: left;margin-left: 20px" @click.native="onSubmit"><i class="el-icon-search"></i>查询
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="openEditDialog" style="float: left;"><i class="el-icon-plus"></i>新增</el-button>
      </el-form-item>
    </el-form>
      </el-col>
      <el-col :span="8">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNumber"
            :page-sizes="[10, 20, 30]"
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="page.totalRow">
          </el-pagination>
        </div>
      </el-col>

      </el-row>
    <el-table
      v-loading="loading"
      element-loading-text="数据加载中"
      :data="page.list"
      style="width:100%"
      @sort-change="onSubmit"
      border>
      <el-table-column
        inline-template
        label="序号"
        width="80"
        align="center">
        <span>{{$index+1+((page.pageNumber-1)*page.pageSize)}}</span>
      </el-table-column>
      <el-table-column
        property="num"
        sortable="custom"
        label="编号"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        property="name"
        sortable="custom"
        label="名称"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        inline-template
        label="状态"
        property="status"
        sortable="custom"
        align="center"
        width="180">
        <span>
          {{status[row.status]}}
        </span>
      </el-table-column>
      <el-table-column
        property="remark"
        label="说明"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        label="操作"
        inline-template
        align="center"
        >
        <template>
          <el-button type="text" @click.native="openEditDialog(row.id)">修改</el-button>
          <el-popover
            ref="popover_"
            placement="top"
          >
            <p><i class="el-alert__icon el-icon-warning red"></i>确定要删除此角色吗？<br>删除后将无法恢复！</p>
            <div style="text-align: right; margin: 0">
              <el-button type="primary" size="mini" @click.native.prevent="deleteRole(row.id);row.p=false">确定</el-button>
            </div>
          </el-popover><el-button type="text" v-popover:popover_>删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--弹出框-->
    <role-add-dialog v-bind:dialog-form-visible="dialogData.show" v-bind:id="id" v-on:closeDialog="closeDialog"></role-add-dialog>
  </div>
</template>
<script>
  import RoleAddDialog from './add.dialog.vue'
  import http from '../../../api/http'
  export default {
    data () {
      return {
        loading:true,
        form: {
          filter: {kwd: '', sort: {create_datetime: 'desc'}},
          pageNo: 1,
          pageSize: 10
        }, status: ["禁用", "激活"],
        id: null,
        dialogData: {show: false},
        page: {},
        dialogFormVisible: false
      }
    },
    computed: {},
    methods: {
      onSubmit (sortCol) {
        var vm = this;
        if(sortCol&&sortCol.prop!=undefined&&sortCol.prop!=''&&sortCol.prop!='undefined'){
          var sortJson='{"'+sortCol.prop+'":"'+(sortCol.order=='descending'?'desc':'asc')+'"}';
          console.log(sortJson);
          vm.form.filter.sort=JSON.parse(sortJson);
          vm.form.pageNo=1;
        }
        vm.loading=true;
        http.postData(vm,"/sys/role/page", {
          json: JSON.stringify(vm.form.filter),
          pageNo: vm.form.pageNo,
          pageSize: vm.form.pageSize
        },function (resp) {
          var ret = resp.body;
          if (ret.code == '111') {
            vm.page = ret.value;
          }
          vm.loading=false;
        });
      },
      openEditDialog(id_) {
        this.$set(this.dialogData, 'show', true);
        if (id_ != undefined && typeof id_ == "string") {
          this.id = id_;
        } else {
          this.id = '';
        }
      },
      loadData() {
        var vm=this;
        if (this.id != undefined && this.id != '') {
          http.postData(vm,"/sys/role/detail/" + this.id, {},function (resp) {
            var ret = resp.body;
            if (ret.code === '111') {
              vm.from = ret.value;
            } else {
              vm.$notify.error({title: '操作失败', message: ret.msg});
            }
          });
        }
      },
      closeDialog() {
        this.$set(this.dialogData, 'show', false);
      },
      deleteRole (id) {
        var vm = this;
          http.postData(vm,"/sys/role/del/" + id, {},function (resp) {
            var ret = resp.body;
            if (ret.code === '111') {
              vm.$notify({title: '删除提示', message: ret.msg, type: 'success'});
              vm.onSubmit();
            } else {
              vm.$message({type:'error', message: ret.msg});
            }
          });
      },
      handleSizeChange () {
        this.form.pageNo = 1
        this.onSubmit()
      },
      handleCurrentChange (val) {
        this.form.pageNo = val
        this.onSubmit()
      }
    },
    components: {
      RoleAddDialog
    },
    created() {
      this.onSubmit();
    }
  }

</script>
<style>
</style>
